<template>
  <el-card>
    <div class="top-box">
      <!--   @tab-click="handleClick" -->
      <el-tabs v-model="activeName" class="el-tabs">
        <el-tab-pane label="销售额" name="first"></el-tab-pane>
        <el-tab-pane label="访问量" name="second"></el-tab-pane>
      </el-tabs>
      <div class="right-box">
        <span @click="setday">今日</span>
        <span @click="setweek">本周</span>
        <span @click="setmonth">本月</span>
        <span @click="setyear">本年</span>
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <el-row :gutter="5">
      <el-col :span="18"> <div class="charts-left" ref="chart"></div></el-col>
      <el-col :span="6">
        <p class="salemaxprice">
          {{ this.activeName == "first" ? "销售额" : "访问量" }}排名
        </p>
        <ul>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
          <li><span>1</span><span>肯德基</span><span>123456</span></li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import { mapState } from "vuex";
export default {
  name: "Sale",
  data() {
    return {
      activeName: "first",
      BarCharts: {},
      value: [],
    };
  },
  mounted() {
    this.BarCharts = echarts.init(this.$refs.chart);
    // console.log(Charts);
    this.BarCharts.setOption({
      title: {
        text: "销售额",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [],
        },
      ],
    });
  },
  watch: {
    activeName() {
      this.BarCharts.setOption({
        title: {
          text: this.activeName == "first" ? "销售额" : "访问量",
        },
        xAxis: {
          data:
            this.activeName == "first"
              ? this.list.orderFullYearAxis
              : this.list.userFullYearAxis,
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data:
              this.activeName == "first"
                ? this.list.userFullYear
                : this.list.orderFullYear,
          },
        ],
      });
    },
    list() {
      this.BarCharts.setOption({
        xAxis: {
          data: this.list.orderFullYearAxis,
        },
        series: [
          {
            data: this.list.userFullYear,
          },
        ],
      });
    },
  },
  methods: {
    setday() {
      const day = dayjs().format("YYYY-MM-DD");
      this.value = [day, day];
    },
    setweek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.value = [start, end];
    },
    setmonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      console.log(end);
      this.value = [start, end];
    },
    setyear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.value = [start, end];
    },
  },
  computed: {
    ...mapState("home", ["list"]),
  },
};
</script>

<style >
.el-card__body {
  padding-top: 5px;
}
.el-tabs {
  width: 50%;
}
.top-box {
  display: flex;
}
.right-box {
  display: flex;

  font-size: 14px;
  width: 50%;
  padding-top: 10px;
  justify-content: space-around;
}
.charts-left {
  width: 100%;
  height: 400px;
}
.salemaxprice {
  margin: 15px 0px;
}
</style>
<style scoped>
ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding-left: 0px;
}
ul li {
  display: flex;
  justify-content: space-around;
  height: 13%;
  font-size: 16px;
}
</style>